<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <title>Title</title>
</head>
<body>

<h3>1、边框</h3>
<div style="border: 1px solid red;">
    <p>border：边框,border表示四周都加，还有border-top，border-left,border-right等</p>
    <p>1px：边框宽度</p>
    <p>solid：边框为实体，dotted：边框为虚线</p>
    <p>red：边框颜色为红色</p>
</div>

<h3>2、设置div的宽高</h3>
<div style="width: 60%;height: 155px;border: 1px solid rebeccapurple; font-size: 16px;">
    <p>width设置宽度，可用百分比，也可以写成固定像素如500px</p>
    <p>height设置高度，可用百分比，也可以写成固定像素，但使用百分比时，得有个固定的父标签包括</p>
    <p>font-size设置字体大小</p>
    <p>虽然设置了宽度，但是此div还是行级标签</p>
</div>

<h3>3、设置字体居中</h3>
<div style="border: 1px solid chartreuse; height:50px;line-height: 50px;text-align: center">
    <span>line-heitht设置等于div高度，则垂直方向居中;</span>
    <span>text-align设置字体水平方向居中</span>
</div>
<h4>4、设置字体</h4>
<div style="border: 1px solid darkgreen;font-size: 20px;font-weight: bold">
    <p>font-size设置字体大小</p>
    <p>font-weitht设置字体加粗</p>
</div>

<h4>5、float</h4>
<div style="width: 20%;background-color: aqua;float: left">都往左飘</div>
<div style="width: 60%;background-color: bisque;float: left">设置为80%，则占一整行，如果设置为90%，超过一行，则会另起一行</div>

<div style="background-color: blueviolet;width: 30%;float: left">往左浮动</div>
<div style="background-color: blueviolet;width: 50%;float: right">往右浮动</div>
<br>
<br>
<h4>6、float应用</h4>
<div style="width: 300px;border: 1px solid red;">
    <div style="width: 95px;height: 50px;border: 1px solid green;float: left"></div>
    <div style="width: 95px;height: 50px;border: 1px solid green;float: left"></div>
    <div style="width: 95px;height: 50px;border: 1px solid green;float: left"></div>
    <div style="width: 95px;height: 50px;border: 1px solid green;float: left"></div>
    <div style="width: 95px;height: 50px;border: 1px solid green;float: left"></div>
    <div style="width: 95px;height: 50px;border: 1px solid green;float: left"></div>
    <div style="width: 95px;height: 50px;border: 1px solid green;float: left"></div>
    <div style="clear: both"></div> <!--父div的边框消失，使用这个样式解决，能让父标签控制子标签-->
</div>

<br>
<h4>7、display</h4>
<div style="border: 1px solid darkgreen">
    <p>display: none 让标签消失</p>
    <p>display: inline 让div变成行内标签</p>
    <p>display: block 让span变成行级标签</p>
    <p>display: inline-block 具有inline默认字节有多少占多少的特性，也有block可以设置高度、宽度、pandding和margin特性。</p>
    <p style="color: red">主意：行内标签无法设置高度，宽度，边距;块级标签可以设置</p>
</div>
<div style="background-color: darkgreen;display: inline">这是一个div标签,display: inline</div>
<span style="background-color: darkgreen;display: block">这个一个span标签,display: block</span>
<span style="width: 50px;height:60px;background-color: red">span标签设置了高度宽度，不生效</span>
<span style="width: 600px;height:80px;background-color: goldenrod;display: inline-block;">span设置了高度宽度，display: inline-block，宽高生效</span>

<h4>8、padding和margin</h4>
<p>margin外边距</p>
<div style="border: 1px solid red;height: 70px;">
    <div style="background-color: green;height: 50px">默认margin-top等于0</div>
</div>
<br>
<div style="border: 1px solid red;height: 70px;">
    <div style="background-color: green;height: 50px;margin-top: 20px">设置margin-top: 20px</div>
</div>
<p>padding内边距</p>
<div style="border: 1px solid red; height: 70px;">
    <div style="background-color: green;height: 50px">
        默认padding-top也是0
    </div>
</div>
<br>
<div style="border: 1px solid red; height: 70px;">
    <div style="background-color: green;height: 50px;padding-top: 20px">
        设置padding-top: 20px；字体到父边框距离变化了，可以使用chrome审查元素动态查看。
    </div>
</div>
<br>

<h4>9、div居中</h4>
<p>当有position时，此方法不生效</p>
<div style="background-color: gray;width: 980px;margin: 0 auto;">  <!--margin 0 auto;0表示此div距离上下边距为0，auto表示左右两边自动，会让当前div居中。-->
    <div style="float: left;">收藏本站</div>
    <div style="float: right;">
        <a href="#">登录</a>
        <a href="#">注册</a>
    </div>
    <div style="clear:both;"></div>     <!--如果没有此行，子标签会覆盖父标签，让background-color不显示-->
</div>

<h4>10、position</h4>
<div style="border: 1px solid red">
    <p>position相当于将div从堆叠状态拿出了，然后放在另一个div（看作一面墙）的某个位置</p>
    <p>position fixed 固定在浏览器窗口某个位置，不随着滚轮滚动而变动</p>
    <p>position absolute 绝对定位，页面的固定位置，配合relative使用，意为相对父标签定位。单独使用，第一次定位，可以在指定位置，滚轮滚动时，会随着移动</p>
    <div style="position: relative">    <!--单独使用relative没有任何效果-->
        <div style="position:absolute;top: 0;left: 0;"></div>   <!--是指放在父类标签的某个位置-->
    </div>
</div>

<h4>11、opacity设置透明度</h4>
<div style="border: 1px solid red;">
    <p>opacity范围从0-1</p>
</div>

<h4>12、z-index设置层级顺序</h4>
<div style="border: 1px solid red;">
    <p>z-index 当页面有多层时，z-index值大的，在最上层</p>
</div>

<h4>13、overflow</h4>
<div style="border: 1px solid red;">
    <p>overflow: hidden 当子标签超过父标签范围隐藏</p>
    <p>overflow: auto 当子标签超过父标签范围，出现滚动条</p>
</div>


<h4>14、hover当鼠标移动到标签上时应用样式</h4>
<div style="border: 1px solid red;">
    .pg-header .menu:hover{background-color: blue;}  <!--当鼠标移动到class等于menu标签上时，背景色变为蓝色。-->
</div>

<h4>15、background-image背景图片</h4>
<div style="border: 1px solid red;">
    <p>background-image:url(../image/1.jpg); 默认div是一行，图片会重复放，来占满整个div，应用场景：页面渐变色，使用一个很细的图片，慢慢沾满屏幕。</p>
    <p>background-repeat:norepeat不重复，repeat-x横向重复，repeat-y纵向重复</p>
    <p>background-position 移动图片；background-position-x横向移动图片；background-position-y纵向移动图片</p>
    <p>background-position:0px 10px； 后面两个值代表x,y。</p>
</div>


</body>
</html>